import React from 'react';
import { Form, Input, Select, DatePicker, Button, Row, Col } from 'antd';

const SearchArea = ({ form, searchItems, onSearch }) => {
  const handleReset = () => {
    form.resetFields();
    onSearch({});
  };

  return (
    <Form form={form} onFinish={onSearch}>
      <Row gutter={[16, 16]}>
        {searchItems.map((item) => (
          <Col span={6} key={item.name}>
            <Form.Item label={item.label} name={item.name}>
              {item.type === 'input' && <Input placeholder={`请输入${item.label}`} />}
              {item.type === 'select' && (
                <Select placeholder={`请选择${item.label}`} options={item.options} />
              )}
              {item.type === 'datePicker' && <DatePicker style={{ width: '100%' }} />}
            </Form.Item>
          </Col>
        ))}
        <Col span={6}>
          <Form.Item>
            <Button type='primary' htmlType='submit'>
              查询
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
};


export default SearchArea;